<template>
  <div id="all" class="list">
    <el-card class="box-card">
      <div id="search_bar">
        <div class="span">
          <span class="star">*</span> 用户账号：
          <div class="div_inner">
            <el-input v-model="input" id="userId" placeholder="请输入关键字"></el-input>
          </div>
        </div>
        <div class="span">
          <span class="star">*</span> 身体类型：
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="span">
          <span class="star">*</span> 体重：
          <div class="div_inner">
            <el-input v-model="input" id="userId" placeholder="请输入关键字"></el-input>
          </div>
        </div>
        <div class="span">斤&nbsp;至
          <div class="div_inner">
            <el-input v-model="input" id="userId2" placeholder="请输入关键字"></el-input>
          </div>&nbsp;斤
        </div>
        <div class="span">
          <el-button type="primary" size="small" @click="" icon="el-icon-search">查询</el-button>
        </div>

        <div class="span">
          <el-button type="primary" size="small" @click="reset">重置</el-button>
        </div>
      </div>
      <div id="body">
        <h4 style="margin-left: 0px;float: left">数据列表</h4>
        <template>
          <el-table :data="tableData" :row-class-name="tableRowClassName"  stripe style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="50">
            </el-table-column>
            <el-table-column prop="userId" label="用户账号" align="center" width="170">
            </el-table-column>
            <el-table-column prop="userName" label="用户昵称" align="center" width="170">
            </el-table-column>
            <el-table-column prop="weightValue" label="体重（斤）" align="center" width="170">
            </el-table-column>
            <el-table-column prop="fatPercentage" label="脂肪率" align="center" width="170">
            </el-table-column>
            <el-table-column prop="bmi" label="BMI" align="center" width="170">
            </el-table-column>
            <el-table-column prop="figure" label="身体类型" align="center" width="170">
            </el-table-column>
            <el-table-column prop="updateTime" label="最近测量时间" align="center" width="170" :formatter="formatDate">
            </el-table-column>
            <el-table-column fixed="right" prop="manager" label="操作" align="center" width="160">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="mini" >
                  查看明细
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="block" style="margin-top: 20px;">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[6, 12, 20]"
                       :page-size="6"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total=total>
        </el-pagination>
      </div>
    </el-card>
    <!-- 查看明细信息弹窗 -->
    <el-dialog title="查看明细" :visible.sync="dialogFormVisible">
      <div id="detail">
        <h4>{{userName}}用户的体重详情</h4>
        <p>体重: {{weightValue}}</p>
        <p>BMI: {{bmi}}</p>
        <p>脂肪率: {{fatPercentage}}</p>
        <p>肌肉量：{{muscleValue}}</p>
        <p>水分率：{{moisturePercentage}}</p>
        <p>基础代谢率 {{metabolizing}}</p>
      </div>
    </el-dialog>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        dialogFormVisible: false,
        pageSize: 6,
        pageNum: 1,
        weightValue:'',
        bmi:'',
        userName:'',
        fatPercentage:'',
        muscleValue:'',
        moisturePercentage:'',
        metabolizing:'',
        total:'',
        tableData:[],
        input: '',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
      }
    },
    components: {
    },
    created() {
      this.getWeightList();
    },
    methods: {
      reset() {

        this.getWeightList();
      },
      //时间格式化
      formatDate:function(row, column) {
        // 获取单元格数据
        let data = row[column.property]
        // if (this.$MyComm.isEmpty(data)) {
        // 	return ''
        // }
        let dt = new Date(data)
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
      },
      //监听每页条数改变
      handleSizeChange(val) {
        this.pageSize = val;
        this.getWeightList();
        console.log(`每页 ${val} 条`);
      },
      //监听当前页改变
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.getWeightList();
      },
      //弹出窗体展示数据使用的方法
      handleClick(row,index) {
        this.getWeightDetailList(row.userId);
        this.dialogFormVisible = true;
      },
      getWeightList(){
        this.axios.get('micro-sports-server/weight/all',{
          params:{
            pageSize: this.pageSize,
            pageNum: this.pageNum,
          }
        }).then(res => {
          console.log(res.data);
          this.tableData=res.data.data.data;
          this.total=res.data.data.total;
        })
      },
      getWeightDetailList(userId){
        this.axios.get('/weight/one',{
          params:{
            userId:userId,
          }
        }).then(res => {
          console.log(res.data);
          this.userName=res.data.data.userName;
          this.weightValue=res.data.data.weightValue;
          this.bmi=res.data.data.bmi;
          this.fatPercentage=res.data.data.fatPercentage;
          this.muscleValue=res.data.data.muscleValue;
          this.moisturePercentage=res.data.data.moisturePercentage;
          this.metabolizing=res.data.data.metabolizing;
        })
      },
    },
  }
</script>
<style scoped>

  .div_inner{
    position: relative;
    font-size: 14px;
    display: inline-block;
  }
  .span{
    display: inline-block;
    margin-left: 15px;
  }
  #search_bar{
    height:100px;
    background-color: azure;
    text-align:center;
    line-height:80px;
    margin-top: 10px;
  }
  .star{
    color:red;
  }
  #body{
    width: 100%;
  }
  .list{
    /*height: 400px;*/
    border: 1px solid white;
    width: 96%;
    margin: auto;
    padding-left: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: white;
  }
</style>
